<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>OpenLayers - LayerSwitcher sidebar</title>
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <link
      href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="https://openlayers.org/en/v6.1.1/css/ol.css" />
    <link
      rel="stylesheet"
      href="https://rawgit.com/Turbo87/sidebar-v2/master/css/ol3-sidebar.css"
    />
    <link rel="stylesheet" href="../dist/ol-layerswitcher.css" />
    <link rel="stylesheet" href="sidebar.css" />
  </head>
  <body>
    <!-- START OF SIDEBAR DIV -->
    <div id="sidebar" class="sidebar collapsed">
      <!-- Nav tabs -->
      <div class="sidebar-tabs">
        <ul role="tablist">
          <li>
            <a href="#home" role="tab"><i class="fa fa-bars"></i></a>
          </li>
          <li>
            <a href="#profile" role="tab"><i class="fa fa-user"></i></a>
          </li>
          <li class="disabled">
            <a href="#messages" role="tab"><i class="fa fa-envelope"></i></a>
          </li>
          <li>
            <a
              href="https://github.com/Turbo87/sidebar-v2"
              role="tab"
              target="_blank"
              ><i class="fa fa-github"></i
            ></a>
          </li>
        </ul>

        <ul role="tablist">
          <li>
            <a href="#settings" role="tab"><i class="fa fa-gear"></i></a>
          </li>
        </ul>
      </div>

      <!-- Tab panes -->
      <div class="sidebar-content">
        <div class="sidebar-pane" id="home">
          <h1 class="sidebar-header">
            Layers
            <span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
          </h1>
          <!-- !!! HERE WILL GO THE CONTENT OF LAYERSWITCHER !!! -->
          <div id="layers" class="layer-switcher"></div>
        </div>

        <div class="sidebar-pane" id="profile">
          <h1 class="sidebar-header">
            Profile<span class="sidebar-close"
              ><i class="fa fa-caret-left"></i
            ></span>
          </h1>
        </div>

        <div class="sidebar-pane" id="messages">
          <h1 class="sidebar-header">
            Messages<span class="sidebar-close"
              ><i class="fa fa-caret-left"></i
            ></span>
          </h1>
        </div>

        <div class="sidebar-pane" id="settings">
          <h1 class="sidebar-header">
            Settings<span class="sidebar-close"
              ><i class="fa fa-caret-left"></i
            ></span>
          </h1>
        </div>
      </div>
    </div>
    <!-- END OF SIDEBAR DIV -->

    <div id="map" class="sidebar-map"></div>
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,Object.assign,Event,URL"></script>
    <script src="https://openlayers.org/en/v6.1.1/build/ol.js"></script>
    <script>
      // TEMP sidebar-v2 requires ol.inherits which was removed in ol v6.0
      if (window.ol && !window.ol.inherits) {
        ol.inherits = function inherits(childCtor, parentCtor) {
          childCtor.prototype = Object.create(parentCtor.prototype);
          childCtor.prototype.constructor = childCtor;
        };
      }
    </script>
    <script src="https://rawgit.com/Turbo87/sidebar-v2/master/js/ol3-sidebar.js"></script>
    <script src="../dist/ol-layerswitcher.js"></script>
    <script src="sidebar.js"></script>
  </body>
</html>
